<!DOCTYPE HTML>

<!--
Copyright 2014 Chris Devers

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
 <head>
  <meta charset="UTF-8">
  <title>Follow Me</title>
  <link rel="stylesheet" href="simon.css">
  
  <style type="text/css">
    body {
        margin:     0px;
        text-align: center;
    }
  </style>
 </head>
 
 <body id="body">
  <!-- Import all of the game's other Javascript files. -->
  <script type="text/javascript" src="button_events.js"></script>
  
  <!-- The main menu -->
  <table id="menuTable" style="margin:0px auto; width=100%; height=100%">
   <tr>
     <th><span style="color:green">Fo</span><span style="color:yellow">ll</span><span style="color:red">ow </span><span style="color:blue">Me</span></th>
   </tr>
   <tr style="height:100%">
    <td>
     <object data="images/start_button.svg" type="image/svg+xml" style="height:21.25%"></object><br>
     <object data="images/highscore_button.svg" type="image/svg+xml" style="height:21.25%"></object><br>
     <object data="images/settings_button.svg" type="image/svg+xml" style="height:21.25%"></object><br>
     <object data="images/rules_button.svg" type="image/svg+xml" style="height:21.25%"></object>
    </td>
   </tr>
  </table>
  
  <script type="text/javascript">
    var aspectRatio   = 4 / 3;
    var menu          = document.getElementById("menuTable");
    var textSizeRatio = 0.15; // Ratio of text height to window height
    
    // Scale the menu to the window, keeping a constant aspect ratio.
    function resizeMenu() {
        "use strict";
        
        var width, height;
        
        if (window.innerWidth >= window.innerHeight * aspectRatio) {
            width  = window.innerHeight * aspectRatio + "px";
            height = window.innerHeight;
        } else {
            width  = window.innerWidth;
            height = window.innerWidth / aspectRatio;
        }
        
        menu.setAttribute("width", width + "px");
        menu.setAttribute("height", height + "px");
        
        // The text needs to be scaled separately.
        document.getElementById("body").setAttribute("style", "font-size:" + height * textSizeRatio + "px");
    }
    
    /* Called when the Start Game button is pressed. */
    function startGame() {
        "use strict";
    
        // Go to the instructions page.
        window.location.href = "../instructions.html";
    }
    
    window.onresize = resizeMenu;
    window.onresize();
  </script>
 </body>
</html>